<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title class="title">月卡续费</title>
    <link rel="stylesheet" href="../css/weui.css" />
    <link rel="stylesheet" href="../css/example.css" />
    <style>
        html,
        body {
            background-color: #f2f2f2;
            color: #333333;
            font-family: 'PingFangSC-Regular'
        }

        .page {
            opacity: 1;
            font-size: 16px;
        }

        .cell_text:before,
        .cell_text:after {
            content: none;
        }

        .top {
            height: 18vh;
            background-color: #62A8FD;
            color: #FFFFFF;
        }

        .flex-box {
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .weui-flex {
            background-color: #FFFFFF;
            height: 8vh;
        }

        .weui-flex__item {
            display: inline-block;
            text-align: center;
        }

        .itemcenter {
            margin: 0 auto;
        }

        .leftitem {
            border-right: 1px solid #D1D1D1;
        }

        .mycarimg,
        .myparkimg {
            width: 8vw;
            vertical-align: middle;
            height: 5.1vh;
        }

        .mycar {
            margin: 0 10px;
            font-weight: 600;
            font-size: 17px;
        }

        .monthly-card-box {
            font-size: 10px;
            color: white;
            background-color: #0051BC;
            padding: 3px 7px;
            border-radius: 5px;
            margin-left: 5px;
        }

        .date-time {
            font-weight: 600;
            color: #333;
        }

        .bottom-line {
            border-bottom: 1px solid #D1D1D1;
        }

        .small-text {
            color: #B1B1B1;
            font-size: 10px;
        }

        .fee-money {
            color: #094FAE;
            font-size: 20px;
            font-weight: 600;
        }

        .text {
            color: #BEBEBE;
            font-weight: 400;
            font-size: 14px;
        }

        .weui-cell {
            margin-right: 15px;
            padding-right: 0px;
        }

        .month {
            margin-bottom: 20px;
            justify-content: center;
            font-size: 13px;
        }

        .month_btn {
            display: inline-block;
            border-radius: 5px;
            text-align: center;
            margin-right: 20px;
            border: 1px solid #0051BC;
            font-weight: 100;
            padding: 0.2vh 2vw;

        }

        .month_btn_default {
            background-color: #fff;
            color: #0051BC;
        }

        .month_btn_default.active {
            background-color: #0051BC;
            color: #FFFFFF;
        }

        .fee-sum {
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: center;
            padding-right: 20px;
            height: 8vh;
            line-height: 8vh;
            background: #fff;
        }

        .btn-same {
            width: 92%;
            border-radius: 8px;
            font-weight: 300;
        }

        .renew-btn {
            background: #0051BC;
            color: #fff;
        }

        .dismiss-btn {
            color: #C3C3C3;
            border: 1px solid #C4C4C4;
        }

        .button-sp-area {
            margin-top: 60px;
        }

        .cell_text:before,
        .cell_text:after {
            content: none;
        }

        .flex-box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .weui-input {
            font-weight: 400;
        }

        .weui-cell__bd {
            margin: 0;
            padding: 0;
        }

        .date_time {
            text-align: center;
            margin-left: 25%;
            font-size: 20px;
            font-weight: 500;
        }

        .renewal_start_date {
            color: #333333;
        }

        input[type="date"]:before {
            content: attr(placeholder);
            color: #8d8d8d;
        }
    </style>
</head>

<body>
    <div class="page ">
        <!-- 车牌信息 -->
        <div class="weui-cells cell_text" style="margin-top:0">
            <div id="mycar" class="weui-cell flex-box">
                <img src="../images/car@2x.png" class="mycarimg">
                <span id="car_num" class="mycar"></span>
                <span class="monthly-card-box">月卡车</span>
            </div>
        </div>
        <div class="weui-cells cell_text" style="margin-top:10px;">
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <span class="renewal_start_date">续费开始日期</span>
                </div>
                <div class="weui-cell__bd">
                    <div id="showDatePicker" placeholder="请点击续费日期" class="weui-input date_time"></div>
                </div>
            </div>
            <div class="weui-cell ">
                <div class="weui-cell__bd">
                    <span class="renewal_start_date">
                        单月计费明细
                        <span class="small-text">非固定车位费</span>
                    </span>
                </div>
                <div class="weui-cell__ft">
                    <span class="fee-money">1.50
                        <span class="text">元/月</span>
                    </span>
                </div>
            </div>
            <!-- 本次办理 -->
            <div class="weui-cell renewal_start_date">本次办理</div>
            <div class="weui-cell month cell_text">
                <span class="month_btn month_btn_default active" value="1">1个月</span>
                <span class="month_btn month_btn_default" value="3">3个月</span>
                <span class="month_btn month_btn_default" value="6">6个月</span>
                <span class="month_btn month_btn_default" value="12">12个月</span>
            </div>
        </div>
        <!-- 合计金额 -->
        <div class="fee-sum">
            <span class="text">合计：</span>
            <span id="fee" class="fee fee-money">1.50</span>
            <span class="text">元</span>
        </div>
        <div class="button-sp-area">
            <a id="pay_confirm" class="weui-btn btn-same renew-btn">确定续费</a>
            <a href="expired_month_card.html" class="weui-btn btn-same dismiss-btn cell_text">
                取消
            </a>
        </div>
    </div>


    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="../js/weui.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/moment.min.js"></script>

    <script>
        var plate = get_querystring('plate');
        var openid = get_querystring('openid');
        var auth_code = get_querystring('auth_code');
        var phone = null;
        var housenumber = null;
        var parkingspace = null;
        var customer_idx = null;
        var validfrom = null;
        var validto = null;
        var area = null;


        function queryfixedcar(openid) {
            var data = {
                openid: openid
            }
            var url = hostname + rest_domain + '/wechat/user/fixedcar';
            $.ajax({
                type: 'get',
                url: url,
                data: data,
                success: function (result, textStatus) {
                    if (!result || !result.result || !result.data) {
                        return;
                    }
                    var monthdata = result.data;
                    if (result.data = null) {
                        alert("您好，您的车辆目前没有办理月卡");
                    }
                    else {
                        var data = monthdata[0];
                        // alert(JSON.stringify(data));
                        $('#pay_confirm').bind('click', function () {
                            var fee = $('#fee').html();
                            if (!isFinite(fee) || fee <= 0)
                                return;
                            var billparams = {
                                auth_code: get_querystring("auth_code"),
                                area: data.area,
                                housenumber: data.housenumber,
                                plate: data.plate,
                                parkingspace: data.parkingspace,
                                phone: data.phone,
                                customeridx: data.customer_idx,
                                validfrom: validfrom,
                                validto: validto,
                                amount: fee
                            };
                            alert(JSON.stringify(billparams));
                            //创建订单
                            // createbill(billparams);
                        })
                    }
                    // $('.page__bd').empty();
                    // drawfixedcar(result.data || []);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('request fail' + XMLHttpRequest);

                }
            })
        }

        $(function () {
            $('#car_num').html(plate);
            queryfixedcar(openid);
            // 日期选择器的点击事件
            $('#showDatePicker').on('click', function () {
                this.removeAttribute('placeholder');
                var starttime = moment($('#showDatePicker').html());
                if (!starttime.isValid())
                    starttime = moment();
                var d = starttime.toArray().slice(0, 4);
                weui.datePicker({
                    start: (new Date()).getFullYear(),
                    end: (new Date()).getFullYear() + 1,
                    defaultValue: [d[0], d[1] + 1, d[2]],
                    onConfirm: function (result) {
                        var [year, month, day] = result;
                        var starttime = moment(`${year}-${month}-${day}`, "YYYY-M-D").format("YYYY-MM-DD");
                        $('#showDatePicker').html(starttime);
                        validfrom = starttime;
                        alert(validfrom);
                        compute_fee();
                    }
                });
            });

            $('.month_btn').on('click', function () {
                $(this).addClass('active').siblings().removeClass('active');
                var month = parseInt($('.month_btn.active').attr('value'));
                var fee = month * 1.50;
                $('#fee').html(fee);
                var year = moment().year(validfrom);
                var day = moment().day(validfrom);
                alert(year+month+day);
                alert(moment(validfrom).add(month,'months'));
                // alert(endtime);
                endtime = moment(`${year}-${month}-${day}`, "YYYY-M-D").format("YYYY-MM-DD");
                validto = endtime;
                alert(validto);
            });


        })
    </script>
</body>

</html>